<template>
	<float-container class="draw-container" left="1440px" top="143px" title="标注标绘" :logo="require('@/assets/images/iconImg/dataSourceManagerIcon.png')" @close="$emit('close')">
		<div class="drawOuter fadeInRight" oncontextmenu="return false">
			<div class="drawinner">
				<div class="drawtree">
					<el-tree ref="tree" :props="props" :data="treeData" show-checkbox node-key="id" @check-change="handleCheckChange" :default-expand-all="true">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span @contextmenu="showMenu($event, node)" class="title" @dblclick="lookTarget(node)">
								<span
									class="icon"
									v-if="data.type"
									:class="{
										point: data.type == 'Marker',
										word: data.type == 'Text',
										line: data.type == 'GroundPolyline',
										circle: data.type == 'GroundCircle',
										rectangle: data.type == 'GroundRectangle',
										oval: data.type == 'GroundEllipse',
										surface: data.type == 'GroundPolygon',
										juanji: data.type == 'juanji',
										jingong: data.type == 'jingong',
									}"
									:style="{
										'background-image': data.imgUrl ? 'url(' + data.imgUrl + ')' : null,
										border: '2px solid  #37415B',
									}"
								></span>
								{{ node.label }}
							</span>
						</span>
					</el-tree>
					<input type="text" v-show="changeLable" @keyup.enter="changNode($event)" ref="input" />
					<contextmenu
						:menu="menu"
						:pos="pos"
						v-if="menushow"
						@rename="rename"
						@delLayers="delLayers"
						@empty="empty"
						@setActLay="setActLay"
						@newLayer="newLayer"
						@editLayer="editLayer"
					></contextmenu>
				</div>
				<el-row>
					<el-button @click="startSavePlan('openPlanList')" class="file">打开</el-button>
					<el-button @click="startSavePlan('newPlan')" class="file">新建</el-button>
					<el-button @click="endSavePlan" class="file">保存</el-button>
				</el-row>
				<img src="@/assets/images/draw/splitline.png" alt class="splitline" />
				<div class="drawtools">
					<markPage
						ref="markPage"
						:activeLayer="activeLayer"
						:activeLayerParent="activeLayerParent"
						@addLeafNode="addLeafNode"
						@addSpecialNode="addSpecialNode"
						@getLayerId="getLayerId"
					></markPage>
				</div>
				<Dialog v-show="savePanel">
					<div class="saved">
						<div class="inner">
							<p>是否保存当前方案？</p>
							<div class="buttenrow">
								<el-button class="file" @click="endSavePlan">保存</el-button>
								<el-button
									class="file con"
									@click="
										() => {
											this[saveThen]();
											this.savePanel = false;
										}
									"
								>
									不保存，继续
								</el-button>
								<el-button class="file" @click="cancel">取消</el-button>
							</div>
						</div>
					</div>
				</Dialog>
				<Dialog v-show="saveNameShow">
					<div class="saved">
						<div class="inner">
							<el-row>
								<label>
									方案名称
									<input type="text" v-model="saveName" @keydown.enter="startSaveName" />
								</label>
							</el-row>
							<div class="buttenrow">
								<el-button class="file" @click="startSaveName">确定</el-button>
								<el-button class="file" @click="cancel">取消</el-button>
							</div>
						</div>
					</div>
				</Dialog>
				<Dialog v-show="radioShow" class="choose">
					<div class="choose-main">
						<div class="title">选择方案</div>
						<el-select v-model="radio" placeholder="请选择">
							<el-option v-for="(item, i) in planList" :key="i" :label="item.name" :value="i"></el-option>
						</el-select>
						<el-button @click="makeSure(planList[radio])">确定</el-button>
						<el-button @click="closeRadio">取消</el-button>
					</div>
				</Dialog>
			</div>
		</div>
	</float-container>
</template>

<script>
// Marker 点
// Text   文字
// GroundPolyline  线
// GroundCircle   圆
// GroundRectangle 矩形
// GroundEllipse   椭圆
// GroundPolygon   面
/* global rightViewer */
import FloatContainer from '@/components/FloatContainer';
import contextmenu from './contextmenu';
import markPage from './markPage';
import Dialog from './Dialog';
import { getAllPlan, getOnePlan, extPlan, updatePlan } from '@/api/draw';

export default {
	name: 'draw',
	components: {
		contextmenu,
		markPage,
		Dialog,
		FloatContainer,
	},
	data() {
		return {
			props: {
				label: 'label',
				children: 'children',
			},
			treeData: [
				{
					id: Cesium.createGuid(),
					label: '默认方案',
					children: [
						{
							id: Cesium.createGuid(),
							label: '默认图层',
							children: [],
						},
					],
				},
			],
			dataId: null,
			changeLable: false,
			menushow: false,
			menu: null,
			pos: {},
			curNode: null,
			curHTML: null,
			planList: null,
			radioShow: false,
			savePanel: false,
			saveThen: null,
			saveNameShow: false,
			saveName: null,
			radio: 0,
			activeLayer: null,
			activeLayerParent: null,
		};
	},

	mounted() {
		document.addEventListener('click', this.closeMune, true);
		this.activeLayerParent = this.treeData[0].id;
		this.activeLayer = this.treeData[0].children[0].id;
		Cesium.C_layerGroupHandle.addLayerGroup(this.activeLayerParent, '默认方案');
		Cesium.C_layerGroupHandle.addLayer(this.activeLayerParent, this.activeLayer, '默认图层');
		Cesium.C_layerGroupHandle.setActiveLayer(this.activeLayerParent, this.activeLayer);
	},

	methods: {
		handleCheckChange(data, flag) {
			if (data.isLeaf) {
				data.type && (data.type == 'jingong' || data.type == 'juanji') ? this.$refs['markPage'].checkGraphic(data, flag) : Cesium.C_layerGroupHandle.showGeometry(data.id, flag);
			}
		},
		lookTarget(node) {
			if (node.isLeaf) {
				Cesium.C_layerGroupHandle.lookGeometry(node.data.id);
			}
		},
		showMenu(e, node) {
			let renameObj = {};
			let delLayersObj = {};
			let emptyObj = {};
			let setActLayObj = {};
			let newLayerObj = {};
			let editLayerObj = {};
			switch (e.button) {
				case 2:
					this.pos.left = e.x + document.body.scrollLeft + 'px';
					this.pos.top = e.y + document.body.scrollTop + 'px';
					this.curNode = node;
					this.curHTML = e.target;
					renameObj = {
						name: '重命名',
						fun: 'rename',
					};
					delLayersObj = {
						name: '删除',
						fun: 'delLayers',
					};
					emptyObj = {
						name: '清空',
						fun: 'empty',
					};
					setActLayObj = {
						name: '设为活动图层',
						fun: 'setActLay',
					};
					newLayerObj = {
						name: '新建图层',
						fun: 'newLayer',
					};
					editLayerObj = {
						name: '编辑',
						fun: 'editLayer',
					};
					switch (node.level) {
						case 1:
							this.menu = [emptyObj, newLayerObj, renameObj];
							break;
						case 2:
							this.menu = [emptyObj, renameObj, delLayersObj, setActLayObj];
							break;
						case 3:
							this.menu = [renameObj, delLayersObj, editLayerObj];
							break;
					}
					this.menushow = true;
					document.addEventListener('click', this.closeMune, true);
					break;
			}
		},
		changNode(e) {
			this.curNode.data.label = this.$refs.input.value;
			this.$refs.input.value = '';
			this.changeLable = false;
			this.curHTML.removeChild(this.$refs.input);
			document.removeEventListener('click', this.closeRename, false);
		},
		rename() {
			this.menushow = false;
			document.removeEventListener('click', this.closeMune, true);
			this.curHTML.appendChild(this.$refs.input);
			this.changeLable = true;
			this.$refs.input.autofocus = true;
			document.addEventListener('click', this.closeRename, true);
		},
		closeRename(e) {
			if (e.target != this.$refs.input && e.target.className != 'menuCon') {
				this.changeLable = false;
				this.curHTML.removeChild(this.$refs.input);
				document.removeEventListener('click', this.closeRename, false);
			}
		},
		delLayers() {
			this.menushow = false;
			document.removeEventListener('click', this.closeMune, true);
			const parent = this.curNode.parent;
			const children = parent.data.children || parent.data;
			const index = children.findIndex(d => d.id === this.curNode.data.id);
			children.splice(index, 1);
			if (this.curNode.data.type == 'jingong' || this.curNode.data.type == 'juanji') {
				this.$refs['markPage'].deleteGraphic(this.curNode.data.id);
				return;
			}
			this.curNode.level === 2 && Cesium.C_layerGroupHandle.deleteLayer(parent.data.id, this.curNode.data.id);
			this.curNode.level === 3 && Cesium.C_layerGroupHandle.removeGeometry(this.curNode.data.id, parent.parent.data.id, parent.data.id);
			this.curNode.level === 2 && this.curNode.data.id === this.activeLayer && (this.activeLayer = void 0);
		},
		empty() {
			debugger;
			this.menushow = false;
			document.removeEventListener('click', this.closeMune, true);
			this.curNode.data.children = [];
			new Cesium.C_DrawHelper(viewer.scene).stopDrawing();
			// this.curNode.level === 1 && Cesium.C_layerGroupHandle.clearLayerGroup(this.curNode.data.id), (this.activeLayer = void 0)
			if (this.curNode.level === 1) {
				Cesium.C_layerGroupHandle.clearLayerGroup(this.curNode.data.id);
				this.activeLayer = void 0;
			}
			this.curNode.level === 2 && Cesium.C_layerGroupHandle.clearLayer(this.curNode.parent.data.id, this.curNode.data.id);
		},
		setActLay() {
			this.activeLayer = this.curNode.data.id;
			this.activeLayerParent = this.curNode.parent.data.id;
			Cesium.C_layerGroupHandle.setActiveLayer(this.activeLayerParent, this.activeLayer);
			this.menushow = false;
			document.removeEventListener('click', this.closeMune, true);
		},
		newLayer() {
			this.menushow = false;
			document.removeEventListener('click', this.closeMune, true);
			const newChild = { id: Cesium.createGuid(), label: '默认图层', children: [] };
			this.curNode.data.children.push(newChild);
			Cesium.C_layerGroupHandle.addLayer(this.curNode.data.id, newChild.id, newChild.label);
		},
		editLayer() {
			this.menushow = false;
			if (this.curNode.data.type == 'juanji' || this.curNode.data.type == 'jingong') {
				this.$refs['markPage'].editGraphic(this.curNode.data.id);
				return;
			}
			Cesium.C_layerGroupHandle.getGeometry(this.curNode.data.id).setEditMode(true);
		},
		closeMune(e) {
			if (e.target.className != 'menuCon') {
				this.menushow = false;
				document.removeEventListener('click', this.closeMune, true);
			}
		},

		async openPlanList() {
			getAllPlan().then(res => {
				this.$refs['markPage'].clearAll();
				this.planList = res.data.data;
				this.radioShow = true;
			});
		},
		async makeSure(planCon) {
			getOnePlan(planCon.id).then(res => {
				let _self = this;
				let arr = res.data.data.content.split('|');
				this.treeData = JSON.parse(arr[0]);
				this.initLayers();
				setTimeout(function () {
					_self.$refs.tree.setChecked(_self.treeData[0].id, true, true);
				}, 0);
				let programme = JSON.parse(arr[1]);
				Cesium.C_layerGroupHandle.openProgramme(programme, viewer.scene, {
					startEditCallback: this.$refs.markPage.startEditCallback,
					endEditCallback: this.$refs.markPage.endEditCallback,
				});
				// _self.$parent.$refs.imageManage.leftCompareRight = true
				if (window.rightViewer) {
					setTimeout(function () {
						let geometryArr = Cesium.C_layerGroupHandle.getAllGeometry();
						for (let i in geometryArr) {
							if (i === 'size') {
								continue;
							}
							if (geometryArr[i].properties.isRight) {
								let options = _self.getOptions(geometryArr[i]);
								let node = _self.$refs.tree.getNode(i);
								Cesium.C_layerGroupHandle.removeGeometry(node.data.id, node.parent.parent.data.id, node.parent.data.id);
								let geometry = _self.createPrimitive(options);
								geometryArr[i] = geometry;
								geometry._createPrimitive = true;
								let callbacks = _self.$refs.markPage.createCallbacks();
								geometry.startEditCallback = callbacks.startEditCallback;
								geometry.endEditCallback = callbacks.endEditCallback;
								geometry._primitives = rightViewer.scene.primitives;
								rightViewer.scene.primitives.add(geometry);
							}
						}
					}, 0);
				} else {
					setTimeout(function () {
						let geometryArr = Cesium.C_layerGroupHandle.getAllGeometry();

						for (let i in geometryArr) {
							if (i === 'size') {
								continue;
							}
							if (geometryArr[i].properties.isRight) {
								_self.curNode = _self.$refs.tree.getNode(i);
								_self.delLayers();
							}
						}
					}, 0);
				}
				if (arr[2]) this.$refs['markPage'].openGraphic(JSON.parse(arr[2]));
				this.dataId = res.data.id;
			});
			this.cancel();
		},
		getOptions(primitive) {
			let result = {};
			switch (primitive.getType()) {
				case 'Marker':
					result.id = primitive.id;
					result.type = 'Marker';
					result.position = Cesium.Cartesian3.pack(primitive._billboards[0].position, []);
					result.image = primitive._billboards[0].image;
					result.color = primitive._billboards[0].color;
					result.scale = primitive._billboards[0].scale;
					result.properties = primitive._billboards[0].properties;
					break;
				case 'Text':
					result.id = primitive.id;
					result.type = 'Text';
					result.position = Cesium.Cartesian3.pack(primitive._labels[0].position, []);
					result.text = primitive._labels[0].text;
					result.font = primitive._labels[0].font;
					result.fillColor = primitive._labels[0].fillColor;
					result.outlineColor = primitive._labels[0].outlineColor;
					result.outlineWidth = primitive._labels[0].outlineWidth;
					result.properties = primitive._labels[0].properties;
					break;
				case 'GroundPolyline':
					result.id = primitive.id;
					result.type = 'GroundPolyline';
					result.positions = Cesium.Cartesian3.packArray(primitive.positions, []);
					result.width = primitive.width;
					result.lineType = primitive.lineType;
					result.color = primitive.color;
					result.outlineWidth = primitive.outlineWidth;
					result.outlineColor = primitive.outlineColor;
					result.glowPower = primitive.glowPower;
					result.taperPower = primitive.taperPower;
					result.dashedScale = primitive.dashedScale;
					result.dashedLength = primitive.dashedLength;
					result.properties = primitive.properties;
					break;
				case 'GroundPolygon':
					result.id = primitive.id;
					result.type = 'GroundPolygon';
					result.positions = Cesium.Cartesian3.packArray(primitive.positions, []);
					result.color = primitive.color;
					result.outlineColor = primitive.outlineColor;
					result.properties = primitive.properties;
					break;
				case 'GroundEllipse':
					result.id = primitive.id;
					result.type = 'GroundEllipse';
					result.center = Cesium.Cartesian3.pack(primitive.getCenter(), []);
					result.rotation = primitive.getRotation();
					result.color = primitive.color;
					result.semiMajorAxis = primitive.semiMajorAxis;
					result.semiMinorAxis = primitive.semiMinorAxis;
					result.properties = primitive.properties;
					break;
				case 'GroundCircle':
					result.id = primitive.id;
					result.type = 'GroundCircle';
					result.color = primitive.color;
					result.center = Cesium.Cartesian3.pack(primitive.getCenter(), []);
					result.radius = primitive.getRadius();
					result.properties = primitive.properties;
					break;
				case 'GroundRectangle':
					result.id = primitive.id;
					result.type = 'GroundRectangle';
					result.color = primitive.color;
					result.extent = primitive.getExtent();
					result.properties = primitive.properties;
					break;
			}
			return result;
		},
		createPrimitive(options) {
			let primitive = null;
			options.scene = rightViewer.scene;
			switch (options.type) {
				case 'Marker':
					options.position = Cesium.Cartesian3.unpack(options.position);
					options.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
					primitive = new Cesium.Marker(options);
					break;
				case 'Text':
					options.position = Cesium.Cartesian3.unpack(options.position);
					options.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
					primitive = new Cesium.TextAnnotation(options);
					break;
				case 'GroundPolyline':
					options.positions = Cesium.Cartesian3.unpackArray(options.positions);
					primitive = new Cesium.C_GroundPolylinePrimitive(options);
					break;
				case 'GroundPolygon':
					options.positions = Cesium.Cartesian3.unpackArray(options.positions);
					primitive = new Cesium.C_GroundPolygonPrimitive(options);
					break;
				case 'GroundEllipse':
					options.center = Cesium.Cartesian3.unpack(options.center);
					primitive = new Cesium.C_GroundEllipsePrimitive(options);
					break;
				case 'GroundCircle':
					options.center = Cesium.Cartesian3.unpack(options.center);
					primitive = new Cesium.C_GroundCirclePrimitive(options);
					break;
				case 'GroundRectangle':
					primitive = new Cesium.C_GroundRectanglePrimitive(options);
					break;
			}
			return primitive;
		},
		newPlan() {
			this.treeData = [
				{
					id: Cesium.createGuid(),
					label: '默认方案',
					children: [
						{
							id: Cesium.createGuid(),
							label: '默认图层',
							children: [],
						},
					],
				},
			];
			this.$refs.tree.setChecked(1, true, true);
			this.initLayers();
			this.cancel();
		},
		initLayers() {
			Cesium.C_layerGroupHandle.deleteLayerGroup(this.activeLayerParent);
			this.activeLayerParent = this.treeData[0].id;
			this.activeLayer = this.treeData[0].children[0].id;
			Cesium.C_layerGroupHandle.addLayerGroup(this.activeLayerParent, '默认方案');
			Cesium.C_layerGroupHandle.addLayer(this.activeLayerParent, this.activeLayer, '默认图层');
			Cesium.C_layerGroupHandle.setActiveLayer(this.activeLayerParent, this.activeLayer);
		},
		startSavePlan(callback) {
			this.savePanel = true;
			if (callback) {
				this.saveThen = callback;
			}
		},
		async endSavePlan() {
			this.savePanel = false;
			this.saveName = this.treeData[0].label;
			this.saveNameShow = true;
		},
		async startSaveName() {
			extPlan(this.saveName).then(res => {
				if (res.data.data == true) {
					this.$message({
						showClose: true,
						message: '命名重复，请更改标绘方案名称',
						type: 'warning',
						offset: 500,
					});
				} else {
					this.treeData[0].label = this.saveName;
					this.addNewPlan();
				}
			});
		},
		async addNewPlan() {
			let geoObj = Cesium.C_layerGroupHandle.saveProgramme(this.activeLayerParent);
			let graphic = this.$refs['markPage'].saveGraphic();
			let obj = {
				name: this.saveName,
				content: JSON.stringify(this.treeData) + '|' + JSON.stringify(geoObj) + '|' + JSON.stringify(graphic),
			};
			updatePlan(obj)
				.then(res => {
					if (res.data) {
						this.$message({
							showClose: true,
							message: '保存方案成功',
							type: 'success',
							offset: 500,
						});
						this.saveNameShow = false;
						if (this.saveThen) {
							this[this.saveThen]();
						}
					}
				})
				.catch(err => {
					this.$message({
						showClose: true,
						message: err,
						type: 'warning',
						offset: 500,
					});
				});
		},
		closeRadio() {
			this.radioShow = false;
		},
		addLeafNode(data, primitive, flag = true) {
			if (primitive.getType() == 'GroundRectangle' && primitive.appearance.material) {
				data.type = 'Image';
				data.imgUrl = primitive.appearance.material.uniforms.image;
				primitive.properties.addedType = 'Image';
				primitive.properties.addedUrl = primitive.appearance.material.uniforms.image;
				// 调用画矩形的方法绘制贴地图片
			} else {
				data.type = primitive.getType();
				if (primitive.addedType == 'faceMarker') data.imgUrl = primitive.image;
				// 绘制面向屏幕的图片,billboard
			}

			this.$refs.tree.append(data, this.activeLayer);
			this.$refs.tree.setChecked(data.id, flag);
			Cesium.C_layerGroupHandle.addGeometry(primitive, this.activeLayerParent, this.activeLayer);
		},
		addSpecialNode(data, obj) {
			this.$refs.tree.append(data, this.activeLayer);
			this.$refs.tree.setChecked(data.id, true);
		},
		getLayerId() {
			return {
				id: this.activeLayer,
				pId: this.activeLayerParent,
			};
		},
		cancel() {
			this.radioShow = false;
			this.savePanel = false;
			this.saveThen = null;
			this.saveNameShow = false;
		},
		clearPanel() {
			this.treeData[0].children[0].children = [];
			this.$refs['markPage'].groundForm = null;
		},
	},
};
</script>

<style lang="scss">
.draw-container {
	// right: 100px;
	// top: 175px;
	position: fixed !important;
	.drawOuter {
		// position: absolute;
		top: 101px;
		bottom: 50px;
		right: 400px;
		z-index: 111;
		// height: 85%;
		overflow: hidden;
		animation-duration: 0.5s;
		.drawinner {
			position: relative;
			// background-image: url("/images/sit/background.png");
			// background-size: 100% 100%;
			background: rgba(9, 15, 43, 0.7);
			width: 353px;
			height: 100%;
			box-sizing: border-box;
			padding: 20px 20px;
			// margin-right: 20px;
			float: right;
			.title {
				margin-bottom: 0px;
				header {
					width: 100%;
					font-size: 20px;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					color: #2fd5ff;
					text-align: left;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.arrow {
						margin-right: 106px;
					}
					.close {
						cursor: pointer;
						padding: 5px 7px;
						font-size: 20px;
						color: #fff;
						margin-top: -10px;
					}
				}
				.title-line {
					width: 100%;
					margin-bottom: 5px;
				}
			}
			.drawtree {
				height: 200px;
				overflow: scroll;
				&::-webkit-scrollbar {
					/*滚动条整体样式*/
					width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
					height: 0;
				}
				&::-webkit-scrollbar-thumb {
					/*滚动条里面小方块*/
					border-radius: 5px;
					-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
					background: #2fd5ff;
					scrollbar-arrow-color: red;
				}
				&::-webkit-scrollbar-track {
					/*滚动条里面轨道*/
					-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
					border-radius: 0;
					background: rgba(0, 0, 0, 0.1);
				}
				.el-tree {
					&::-webkit-scrollbar {
						/*滚动条整体样式*/
						width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
						height: 0;
					}
					&::-webkit-scrollbar-thumb {
						/*滚动条里面小方块*/
						border-radius: 5px;
						-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
						background: #2fd5ff;
						scrollbar-arrow-color: red;
					}
					&::-webkit-scrollbar-track {
						/*滚动条里面轨道*/
						-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
						border-radius: 0;
						background: rgba(0, 0, 0, 0.1);
					}
					.title {
						padding-right: 250px;
					}
					.icon {
						width: 18px;
						height: 18px;
						background-size: 100% 100%;
						display: inline-block;
						vertical-align: middle;
						margin-right: 10px;
					}
					.point {
						background-image: url('~@/assets/images/draw/point.png');
					}
					.line {
						background-image: url('~@/assets/images/draw/line.png');
					}
					.surface {
						background-image: url('~@/assets/images/draw/surface.png');
					}
					.oval {
						background-image: url('~@/assets/images/draw/oval.png');
					}
					.rectangle {
						background-image: url('~@/assets/images/draw/rectangle.png');
					}
					.word {
						background-image: url('~@/assets/images/draw/word.png');
					}
					.circle {
						background-image: url('~@/assets/images/draw/circle.png');
					}
					.juanji {
						background-image: url('~@/assets/images/draw/juanji.png');
					}
					.jingong {
						background-image: url('~@/assets/images/draw/jingong.png');
					}
				}
				input {
					background: #fff;
					-webkit-writing-mode: horizontal-tb !important;
					text-rendering: auto;
					color: -internal-light-dark(black, white);
					letter-spacing: normal;
					word-spacing: normal;
					text-transform: none;
					text-indent: 0px;
					text-shadow: none;
					display: inline-block;
					text-align: start;
					appearance: textfield;
					background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
					-webkit-rtl-ordering: logical;
					cursor: text;
					margin: 0em;
					font: 400 13.3333px Arial;
					padding: 1px 2px;
					border-width: 2px;
					border-style: inset;
					border-color: -internal-light-dark(rgb(118, 118, 118), rgb(195, 195, 195));
					border-image: initial;
				}
			}
			.drawtools {
				padding-bottom: 20px;
			}
			.saved {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #6570795e;
				.inner {
					position: absolute;
					left: 45%;
					top: 40%;
					background-image: url('~@/assets/images/draw/backg33.png');
					background-size: 100% 100%;
					color: #fff;
					height: 154px;
					width: 271px;
					text-align: center;
					p {
						margin: 20px;
						font-size: 20px;
					}
					.buttenrow {
						position: absolute;
						bottom: 24px;
						text-align: center;
						width: 100%;
					}
					.el-row {
						padding: 10px;
						input {
							background: #fff;
							width: 53%;
							margin-left: 15px;
						}
					}
				}
			}
			> .el-row {
				text-align: right;
			}
			.file {
				width: 58px;
				height: 26px;
				line-height: 26px;
				padding: 0;
			}
			.con {
				width: 90px;
			}
			.splitline {
				position: relative;
				left: -16px;
			}
			.choose {
				.title {
					padding: 0 0 20px;
				}
				.el-select {
					display: block;
					padding: 0 0 20px;
					.el-select-dropdown__item {
						color: #fff;
					}
				}
				.el-button {
					width: 60px;
					height: 30px;
					line-height: 30px;
					padding: 0;
				}
				.choose-main {
					background-image: url('~@/assets/images/draw/backg33.png');
					background-size: 100% 100%;
					padding: 20px;
				}
			}
		}
		// el-tree自定义样式
		.el-tree {
			width: 100%;
			font-size: 0.14rem;
			margin: 0.2rem 0;
			background: none;
			color: #fff;
			position: relative;
			overflow: scroll;
		}
		.el-tree .el-checkbox__inner {
			border-radius: 0 !important;
			background: none;
			margin: 0 15px 0 5px;
		}
		.el-tree .el-tree-node__content {
			background: rgba(16, 34, 67, 0.5);
			height: 30px;
			margin-bottom: 5px;
		}
		.el-tree .el-tree-node__content:hover {
			background-color: #b67d10;
		}
		.el-tree .el-tree-node:focus > .el-tree-node__content {
			background-color: #b67d10;
		}
		.el-tree .el-menu-item:focus,
		.el-tree .el-menu-item:hover {
			background: none !important;
		}
		.el-tree .el-menu-item * {
			vertical-align: baseline !important;
		}
		.el-tree .el-tooltip {
			padding: 0 !important;
		}
		.el-tree .custom-tree-node:hover .tool {
			display: inline-block;
			/* visibility: visible; */
		}
		// el-button 自定义样式
		.el-button {
			background-image: url('~@/assets/images/draw/7.png');
			background-size: 100% 100%;
			background-color: unset;
			color: #fff;
			border: none;
			text-align: center;
			font-size: 12px;
			padding: 5px 10px;
		}
		.el-button:focus,
		.el-button:hover {
			color: #409eff;
			background-color: unset;
		}
		.el-button--mini,
		.el-button--mini.is-round {
			padding: 7px 15px !important;
		}
		// 滚动条自定义样式
		.el-scrollbar {
			/deep/ .el-scrollbar__wrap {
				overflow: auto;
				margin-right: 0px !important;
				overflow-y: scroll;
				// overflow-x: hidden;
				&::-webkit-scrollbar {
					/*滚动条整体样式*/
					width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
					height: 15px;
				}
				&::-webkit-scrollbar-thumb {
					/*滚动条里面小方块*/
					border-radius: 5px;
					box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
					background: rgba(141, 139, 139, 0.2);
					scrollbar-arrow-color: red;
				}
				&::-webkit-scrollbar-track {
					/*滚动条里面轨道*/
					border-radius: 10px;
					background: #000d16;
				}
			}
		}
	}
}

@media screen and(max-width: 1920px) and(max-height:720px) {
	.drawOuter {
		.drawinner {
			width: 300px;
		}
	}
}
@media screen and(max-width: 1920px) and(max-height:1080px) {
	.drawOuter {
		.drawinner {
			width: 310px;
		}
	}
}
</style>
